<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>chartLearn</title>
	</head>
	<body>
		<div style=" width: 100%;display: flex;align-items: center;justify-content: center;">
			<div style="width: 70%;">
				<canvas id="myChart1"></canvas> 
			</div>
		</div>
	</body>
	<script src="js/Chart.js" type="text/javascript" charset="utf-8"></script>
<script type="text/javascript">
            var ctx = document.getElementById('myChart1').getContext('2d');
            var chart = new Chart(ctx, {
                // The type of chart we want to create
                type: 'line',
                // The data for our dataset
                data: {
                    labels: ["201712", "201801", "201802", "201803", "201804", "201805", "201806",
                        "201807", "201808", "201809", "201810", "201811", "201812", "201901", "201902",
                        "201903", "201904", "201905", "201906", "201907", "201908", "201909", "201910",
                        "201911"
                    ],
                    datasets: [{
                            label: "综合评级",
                            fill: false, //是否填充，不填充就显示线。
                            backgroundColor: "rgba(242,190,64,1)", //线的颜色
                            borderColor: "rgba(242,190,64,1)",
                            pointBackgroundColor: "rgba(255,255,255,1)", //数据点的颜色
                            pointStrokeColor: "rgba(242,190,64,1)",
                            data: [3, 3, 3, 3, 3, 3, 3, 3, 3, 3, 3, 3, 3, 3, 3, 3, 3, 3, 3, 3, 3, 3, 3, 3],

                        },
                        {
                            label: "食品安全评级",
                            fill: false,
                            backgroundColor: "rgba(159,190,223,1)",
                            borderColor: "rgba(159,190,223,1)",
                            pointBackgroundColor: "rgba(255,255,255,1)",
                            pointStrokeColor: "rgba(159,190,223,1)",

                            data: [4, 4, 4, 4, 4, 4, 4, 4, 4, 4, 4, 4, 4, 4, 4, 4, 4, 4, 4, 4, 4, 4, 4, 4],
                        }
                    ]
                },

                // Configuration options go here
                options: {
                    customXLabelRota: 90,//x轴的标注倾斜展示
                    customXLabelRotaMinNumber: 90,//x轴的标注倾斜展示
                    scaleShowGridLines: false,
                    pointDot: true,
                    legend: {
                        labels: {
                            usePointStyle: true,//图例的样式使用点的样式
                        }
                    },
                    scales: {
                        yAxes: [{ //y轴
                            ticks: {
                                beginAtZero: true, //y轴从0开始
                                min: 0, //y轴最小值
                                max: 15, //y轴最大值
                                stepSize: 3 //y轴尺度跨度
                            }
                        }],
                        xAxes: [{
                            ticks: {}
                        }]
                    },

                }
            });
        </script>

</html>
